<template>
	<view class="background">
		<!-- <view class="status-contents">
			<view class="status top-view"></view>
		</view> -->
		<!-- 筛选 -->
		
		
		<view class="searchBox">
			<!-- #ifndef MP-WEIXIN -->
			<view class="backLast" @click="back">
				<image src="http://rs.eonfox.cc/clzy/static/left.png" class="back"></image>
			</view>
			<!-- #endif -->
			
			<view class="searchCon">
				<image src="http://rs.eonfox.cc/clzy/static/search.png" class="searchImage"></image>
				<input type="text" v-model="searchData" :placeholder="searchData" @confirm="searchs" style="margin-top: 15upx;"/>
				<!-- <image src="http://rs.eonfox.cc/clzy/static/delet.png" class="searchImage"></image> -->
			</view>
		</view>
		<view class="choiceTop">
			<view class="choiceText show">
				<text>综合</text>
				<image src="http://rs.eonfox.cc/clzy/static/bottom.png" class="choiceImg"></image>
			</view>
			<view class="choiceText " @click="sort_('sales')" :class="{show:sort_sales}">
				<text>销量</text>
				<view class="choiceImg choiceImgbox">
					<uni-icon type="arrowup" size="14" v-if="icon_sales" class="ml10"></uni-icon>
					<uni-icon type="arrowdown" size="14" v-if="!icon_sales"></uni-icon>
				</view>
			</view>
			<view class="choiceText" @click="sort_('money')" :class="{show:sort_money}">
				<text > 价格 </text>
				<view class="choiceImg choiceImgbox">
					<uni-icon type="arrowup" size="14" v-if="!icon_money"></uni-icon>
					<uni-icon type="arrowdown" size="14" v-if="icon_money"></uni-icon>
				</view>
			</view>
			<view class="choiceText"><!-- @click="display=true" -->
				<text>筛选</text>
				<image src="http://rs.eonfox.cc/clzy/static/screen.png" class="choiceImg"></image>
			</view>
		</view>
		<view class="main " v-if="searchList!=''">
			<view class="commodity list-item" v-for="(item,index) in searchList" :key="index" @click="datail(item.id)">
				<view class="commodityLeft">
						<image :src="qiniu+item.image_id"  mode="aspectFit" class="commodityImage"></image>
				</view>
				<view class="commodityRight">
					<view class="commodityBrand">
						<image  :src="item.brandImage" class="brandImage"></image>
						<text>{{item.brandInfo}}</text>
					</view>
					<view class="name">
						<text>{{item.name}} {{item.info}}</text>
					</view>
					<view class="type">
						<text>{{item.label}}</text>
					</view>
					<view class="price">
						<text class="allPrice" v-if="item.property==1">{{item.price_max/100}}积分</text>
						<text class="allPrice" v-else="">¥{{item.price_max/100}}</text>
						<!-- <text class="onePrice">单件￥</text> -->
					</view>
					<view class="commodityType">
						<text class="business" v-if="item.type!=''">{{item.type}}</text>
						<text class="special">特价</text>
						<text class="evaluate">{{item.assess}}条评价</text>
						<text class="goodEvaluate">{{item.goodPraise}}%好评</text>
					</view>
					
				</view>
			</view>
			<uni-load-more :loadingType="loadingType"  :contentText="contentText"></uni-load-more>
		</view>
		
		<view class="null" v-else>该分类暂无商品</view>
		
		<uni-drawer :visible="display" mask="true" mode="right">
				<view class="filtrateBox">
					<view class="filtrateTitle">
						<text>名字</text>
					</view>
					<view class="filtrateContent">
						<text>视屏</text>
						<text>1234</text>
					</view>
					<view class="cut-off">
					</view>
					<view class="priceBox">
						<view class="priceTitle">
							<text>价格区间</text>
						</view>
						<view class="priceContent">
								<input type="text" v-model="money_min"  placeholder="最低价"/>
						        <text style="margin: 0 10px;"> — </text>
								<input type="text" v-model="money_max" placeholder="最高价" />
						</view>
					</view>
					<view class="ButtonBox">
						<view class="reset" @click="reset()">
							<text>重置</text>
						</view>
						<view class="affirm" @click="filtrate">
							<text>确认</text>
						</view>
					</view>
				</view>
		</uni-drawer>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import eonfox from '@/components/eonfox/eonfox.js';
	import fns from '@/components/eonfox/fns.js';
	var ef = new eonfox();
	export default {
		data() {
			return {
				type_id:'',
				searchData:'',
				display:false,
				qiniu:'',
				list:[],
				page:1,
				sort_sales:false,
				sort_money:false,
				icon_sales:false,
				icon_money:false,
				sort:[],
				search:{},
				money_min:'',
				money_max:'',
				searchList:[
				
				],
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				property:0
			};
		},
		components: {uniDrawer,uniIcon,uniLoadMore},
		onShow() {
			this.reset()
		},
		onLoad(option){
			var search=this.search,_this=this;
			if(option.id){
				this.search.type_id=option.id;
			}
			if(option.data){
				this.search.keywords=option.data;
				this.searchData=option.data
			}
			if(option.property){
				this.property=1
			}
			// this.load();
			console.log('传过来的值',option);
			console.log('search',search);
			_this.getList()
			
		},
		onReachBottom() {
			if (this.loadingType !== 0) {
				return;
			}
			this.loadingType = 1;
			var _this=this;
			_this.page++
			ef.submit({
				request:{
					list:['SHOPGOODSLIST',[{page:_this.page,sort:_this.sort,search:_this.search,property:_this.property}]],
				},
				callback(data){
					console.log('more',data);
					var arr=fns.checkError(data,'list',function(errno,error){
						fns.err(error)
					})
					console.log('more-details',arr);
					if(arr.list&&arr.list.data&&arr.list.data.length){
						var list=arr.list.data
						console.log('more-details-success',list);
						for(let i=0;i<list.length;i++){
							_this.searchList.push(list[i])
							console.log(_this.searchList);
						}
						if(arr.list.data.length<10){
							_this.loadingType=2
						}else{
							_this.loadingType = 0;
						}
					}else{
						_this.loadingType = 2;
					}
				},
				error(err){
					fns.err('err',err,1)
				}
			})
		},
		methods:{
			reset(){
				this.page=1
				this.money_min=''
				this.money_max=''
			},
			back(){
				uni.navigateBack({
					deta:1
				})
			},
			sort_(type){
				var sort=this.sort,
				_this=this
				if(type=='money'){
					_this.sort_money=true
					//价格排序
					if(sort.indexOf('money_asc')!=-1){
						sort.splice(sort.indexOf('money_asc'),1)
						sort.push('money_desc')
						_this.icon_money=!_this.icon_money
					}else if(sort.indexOf('money_desc')!=-1){
						sort.splice(sort.indexOf('money_desc'),1)
						sort.push('money_asc')
						_this.icon_money=!_this.icon_money
					}else{
						sort.push('money_asc')
					}
					
				}else if(type=='sales'){
					_this.sort_sales=true
					//销量排序
					if(sort.indexOf('sales_asc')!=-1){
						sort.splice(sort.indexOf('sales_asc'),1)
						sort.push('sales_desc')
						_this.icon_sales=!_this.icon_sales
					}else if(sort.indexOf('sales_desc')!=-1){
						sort.splice(sort.indexOf('sales_desc'),1)
						sort.push('sales_asc')
						_this.icon_sales=!_this.icon_sales
					}else{
						sort.push('sales_desc')
					}
					
				}
				_this.page=1
				_this.getList()
			},
			searchs(){
				this.getList()
			},
			datail(id){
				uni.navigateTo({
					url:'../../pages/goodsDetails/goodsDetails?id='+id
				})
			},
			filtrate(){
				this.getList()
				this.display=!this.display;
			},
			getList(){
				var _this=this;
				uni.showLoading({
					title:'正在加载',
					success() {
						if(_this.searchData){
							_this.search.keywords=_this.searchData
						}
						if(_this.money_min){
							_this.search.money_min=_this.money_min*100
						}
						console.log(_this.money_max);
						if(_this.money_max){
							
							_this.search.money_max=_this.money_max*100
						}
						ef.submit({
							request:{
								list:['SHOPGOODSLIST',[{page:_this.page,sort:_this.sort,search:_this.search,property:_this.property}]],
								config: ['APPLICATIONCONFIG'],
							},
							callback(data){
								uni.hideLoading()
								console.log('callback',data);
								var arr=fns.checkError(data,'list',function(errno,error){
									fns.err(error)
								})
								console.log('callback',arr);
								if(arr.config && arr.config.qiniu_domain){
									_this.qiniu=arr.config.qiniu_domain
								}
								if(arr.list.data){
									_this.searchList=arr.list.data
									if(arr.list.data.length<10){
										_this.loadingType=2
									}
								}
							},
							error(err){
								uni.hideLoading()
								fns.err('err',err,1)
							}
							
						})
					}
				})
				
			},
			
			
		},
	}
</script>

<style>
	.checked{
		color:#e60b30!important
	}
	.background{
		background: #ABABAB;
	}
	.status-contents{
		height: var(--status-bar-height);
	}
	.top-view{
		width: 100%;
		position: fixed;
		top: 0;
	}
	.status{
		height:var(--status-bar-height);
	}
	.filtrateBox{
		height: 93%;
		position: absolute;
		background-color: #FFFFFF;
		right:0px;
		padding:3%;
		width: 90%;
	}
	.filtrateTitle{
		width: 100%;
		height: 70upx;
		font-size: 28upx;
		color: #333333;
		line-height: 70upx;
		padding: 20upx;
	}
	.filtrateContent{
		width: 100%;
		height: auto;
	}
	.filtrateContent text{
		width: auto;
		font-size: 24upx;
		text-align: center;
		padding: 10upx 15upx;
		background-color: #eee;
		border-radius: 15px;
		margin-right: 20upx;
		font-size: 24upx;
		color: #333333;
	}
	.cut-off{
		width: 100%;
		height: 5upx;
		background-color: #eee;
		margin:50upx 0upx ;
	}
	.priceBox{
		width: 100%;
		height: auto;
	}
	.priceTitle{
		width: 100%;
		height: 70upx;
		font-size: 28upx;
		color: #333333;
		line-height: 70upx;
		padding:0upx 20upx;
	}
	.priceContent{
		width: 100%;
		height: auto;
	}
	.priceContent text{
		float: left;
		
	}
	.priceContent input{
		float: left;
		width:120upx;
		font-size: 24upx;
		text-align: center;
		/* padding: 15upx 30upx; */
		background-color: #eee;
		border-radius: 15px;
		
	}
	.ButtonBox{
		width: 100%;
		height:60upx;
		position:absolute;
		background-color:#eee;
		float: left;
		bottom:10px;
		font-size: 28upx;
	}
	.reset text{
		float: left;
		width: 50%;
		height: 80upx;
		text-align: center;
		background-color: #E6E6E6;
		line-height: 80upx;
	}
	.affirm text{
		float: left;
		width:44%;
		height: 80upx;
		text-align: center;
		background-color: #DD524D;
		line-height: 80upx;
	}
	.null{
		text-align:center;
background-color:#fff;
color:grey;
	}
</style>
<style  scoped lang="stylus" ref="stylesheet/stylus">
	.searchBox
		width 100%
		height 50px
		background #fff
		display flex
		align-items center   
		justify-content space-around
		flex-direction row
		 /*#ifdef APP-PLUS*/
		margin-top 70upx
		/* #endif */
		.backLast
			.back
				width 60upx
				height 60upx
		.searchCon
			/* #ifdef H5*/
			width 630upx 
			/*#endif*/
			/* #ifdef MP-WEIXIN*/
			width 710upx
			/*#endif*/
			height 40px
			background #EAEBED
			border-radius 15upx
			display flex
			padding-left 20upx
			line-height 40px
			.searchImage
				width 20px
				height 20px
				padding 0 10upx
				margin-top 20upx
	.choiceTop
		height 50px
		width 100%
		display flex
		align-items center   
		justify-content center
		flex-direction row
		background #fff
		border-bottom 1upx solid #eee
		border-top 1upx solid #eee
		.choiceText
			width 25%
			height 100%
			font-size 28upx
			color #B3B3B3 
			font-weight 600
			display flex
			align-items center   
			justify-content center
			flex-direction row
			.choiceImg
				width 20upx
				height 20upx
			.choiceImgbox
				width 20upx
				height 40upx
				display flex
				align-items center   
				justify-content center
				flex-direction column
				margin-left 5upx
				.choiceImage
					width 20upx
					height 20upx
		.show
			color #E60B30
	.main
		width 100%
		background #fff
		.commodity
			width 100%
			height auto
			display flex
			align-items center   
			justify-content center
			flex-direction row
			.commodityLeft
				width 135px
				height 135px
				display flex
				align-items center   
				justify-content center
				flex-direction row
				.commodityImage
					width 100px
					height 100px
			.commodityRight
				width calc(100% - 135px)
				height 100%
				border-bottom 1upx solid #eee
				.commodityBrand
					margin 3px 0
					color #ABABAB
					display flex
					align-items center   
					justify-content flex-start
					flex-direction row
					font-size 23upx
					.brandImage
						width 15px
						height 15px
				.name
					font-size 30upx
					font-weight 600
				.type
					font-size 23upx
					height 16px
					margin 3px 0
					color #ABABAB
				.price
					font-size 23upx
					color #ABABAB
					height 16px
					.allPrice
						font-size 28upx
						font-weight 600
						color #E60B30
				.commodityType
					height 16px
					margin 5px 0
					font-size 23upx
					display flex
					color #ABABAB
					// align-items center   
					// justify-content flex-start
					flex-direction row
					.business
						padding 0 2px
						color #E60B30
						border 1px solid #E60B30
					.special
						color #fff
						padding 0 2px
						background #E60B30
						margin 0 3px
</style>
